<template>
	<view>
		<u-sticky bgColor="#6492FF" offsetTop=0 customNavHeight=0>
			<navbox :sousuo="0" btn="搜索" @rightH='gesstlist(keyname)' @oninp='oninp'></navbox>
		</u-sticky>
		<view class="" style="height: 14rpx;background-color: #6492ff;">

		</view>
		<view class="" v-if="!isss">
			<view class="con" v-if="keyname.length==0">
				<view class="u-flex u-flex-y-center u-flex-between">
					<view class="con__title">
						历史搜索
					</view>
					<image src="/static/img/home/del.png" class="con__del" @click="del" v-if="lslist.length>0" mode=""></image>
				</view>
				<view class="con__lsss">
					<view class="con__lsss__item" v-for="(item,index) in lslist" @click="gesstlist(item.name)" :key="index">
						{{item.name}}
					</view>
				</view>
			
				<view class="u-flex u-flex-y-center u-flex-between" style="margin-bottom: 18rpx;">
					<view class="con__title">
						热推项目
					</view>
					<view class="" @click="yj=!yj">
						<image src="/static/img/home/zy.png" class="con__zy" mode="" v-if="yj"></image>
						<image src="/static/img/home/by.png" class="con__zy" mode="" v-else></image>
					</view>
				</view>
				
				<!--  -->
				 <u-sticky bgColor="#fff" customNavHeight='110rpx' v-if="yj">
				    <u-tabs :list="list4" lineWidth="45.14rpx" lineHeight='10.42rpx' lineColor="linear-gradient(235deg, #0059C9 0%, #4497FF 100%)" :activeStyle="{
				                color: '#3E3D3D',
				                fontWeight: 'bold',
				                transform: 'scale(1)'
				            }" :inactiveStyle="{
				                color: '#3E3D3D',
				    			fontWeight: 'bold',
				                transform: 'scale(1)'
				            }"  @click="clitab" keyName='dictLabel' itemStyle="padding-left: 25rpx; padding-right: 25rpx; height: 76rpx;">
				    </u-tabs>
				  </u-sticky>
				<view class="con__xmlist" v-if="yj">
					<view class="" v-if="productlist.length>0">
						<view class="con__xmlist__item" v-for="(item,index) in productlist" @click="gesstlist(item.productName)" :key="index">
							<view class="u-flex u-flex-y-center">
								<view class="con__xmlist__item__index" :class="index==0?'index0':index==1?'index1':index==2?'index2':''">
									{{index+1}}
								</view>
								<view class="con__xmlist__item__name">
									{{item.productName}}
								</view>
							</view>
							<view class="con__xmlist__item__num">
								{{item.promotionCount}}人在推
							</view>
						</view>
					</view>
					<view class="" v-else style="margin-top: 200rpx;">
						<u-empty icon="/static/img/index/empty.png" mode="data" text="暂时没有数据"></u-empty>
					</view>
				</view>
			
			</view>
			<!-- 搜索后的关键字列表 -->
			<view class="con" v-else>
				<view class="con__item" v-for="(item,index) in keylist" :key="index" @click="gesstlist(item.name)">
					<u-icon name="search" size="40rpx"></u-icon>
					{{item.name}}
				</view>
			</view>
		</view>
		
		<view class="" style="padding: 25rpx 16rpx;" v-else>
			<proitem v-for="(item,index) in ssproductlist" :pro="item" :key="index"></proitem>
		</view>
	</view>
</template>

<script>
	import {hotList,typeList,list} from '@/api/home.js'
	export default {
		data() {
			return {
				yj: true,
				list4: [],
				productlist:[],
				lslist:[],
				keylist:[],
				keyname:'',
				isss:false,
				prolist:[],
				keyword:'',
				ssproductlist:[]
			};
		},
		methods:{
			init(){
				//获取产品类型
				typeList().then(res=>{
					if(res.data.code==200){
						this.list4=res.data.data
						// 获取热门产品
						this.getlist(this.list4[0].dictValue)
					}
				})
			},
			clitab(item){
				this.getlist(item.dictValue)
			},
			getlist(dictValue){
				hotList({type:dictValue}).then(res=>{
					if(res.data.code==200){
						this.productlist=res.data.data
					}
				})
			},
			oninp(e){
				this.isss=false
				this.keyname=e
				list({name:e}).then(res=>{
					if(res.data.code==200){
						this.keylist=res.data.data
					}
				})
			},
			gesstlist(name){
				this.isss=true
				// 将name存起来
				// 先循环lslist
				this.lslist.map((t,i)=>{
					// 判断是否有同样的搜索词
					if(t.name==name){//有的话就删除，然后把这次的搜索词提前,没有的话就直接提前
						this.lslist.splice(i,1)
					}
				})
				this.lslist.unshift({name})
				// 存下来
				uni.setStorageSync('lslist',this.lslist)
				list({name}).then(res=>{
					if(res.data.code==200){
						this.ssproductlist=res.data.data
					}
				})
			},
			del(){
				let that=this
				uni.showModal({
					title:'确定删除全部历史记录？',
					success(res) {
						console.log(res)
						if(res.confirm){
							that.lslist=[]
							uni.removeStorageSync('lslist')
							that.$forceUpdate()
						}
					}
				})
			}
		},
		onLoad() {
			this.init()
			if(uni.getStorageSync('lslist')){
				this.lslist=uni.getStorageSync('lslist')
			}else{
				this.lslist=[]
			}
			// console.log(uni.getSt('lslist'))
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
	.con {
		background-color: #fff;
		border-radius: 14rpx;
		margin-top: -14rpx;
		padding: 30rpx 16rpx;

		&__title {
			font-family: Source Han Sans SC;
			font-weight: bold;
			font-size: 33rpx;
			color: #3E3D3D;
		}

		&__del {
			width: 33.33rpx;
			height: 39.58rpx;
		}

		&__lsss {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 30rpx 0;

			&__item {
				padding: 0 40rpx;
				line-height: 56rpx;
				background: #F6F6F6;
				border-radius: 28rpx;
				margin-right: 20rpx;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #3E3D3D;
				margin-bottom: 20rpx;
			}
		}

		&__zy {
			width: 43.06rpx;
			height: 27.78rpx;
		}

		&__by {
			width: 41.67rpx;
			height: 19.44rpx;
		}
		&__xmlist{
			padding: 30rpx 40rpx;
			&__item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 36rpx;
				&__name{
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #3E3D3D;
					line-height: 25rpx;
					width: 400rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				&__index{
					width: 40rpx;
					line-height: 18.75rpx;
					background: #99B7FD;
					border-radius: 6rpx;
					text-align: center;
					font-family: Source Han Sans SC;
					font-weight: bold;
					color: #FFFFFF;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 26rpx;
				}
				.index0{
					background: #0059C9;
				}
				.index1{
					background: #2B7DE4;
				}
				.index2{
					background: #6492FF;
				}
				&__num{
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #3E3D3D;
				}
			}
		}
		
		&__item{
			display: flex;
			align-items: center;
			font-size: 30rpx;
			border-bottom: 1rpx solid #CDCDCD;
			padding: 14rpx 0;
		}
	}
</style>